<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false" clrModalSize="lg">
    <h3 class="modal-title">{{'APP_ADD'|translate}}</h3>
    <div class="modal-body modal-height">
        <form clrForm #pvForm='ngForm'>
            <clr-input-container>
                <label>{{"APP_NAME"|translate}}</label>
                <input clrInput [size]="32" name="name"
                       pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*"
                       [(ngModel)]="item.metadata.name" required/>
                <clr-control-helper>{{'APP_STORAGE_NAME_HELPER'|translate}}</clr-control-helper>
            </clr-input-container>
            <clr-input-container>
                <label>Size (Gib)</label>
                <input clrInput type="number" [size]="32" name="size" [(ngModel)]="item.spec.capacity['storage']"
                       required/>
            </clr-input-container>
            <clr-select-container>
                <label>Access Mode</label>
                <select clrSelect name="accessMode" [(ngModel)]="accessMode">
                    <option value="ReadWriteOnce">ReadWriteOnce</option>
                    <option value="ReadWriteMany">ReadWriteMany</option>
                </select>
            </clr-select-container>
            <clr-input-container>
                <label>Host Path</label>
                <input clrInput [size]="32" name="path" [(ngModel)]="item.spec.hostPath.path" required/>
            </clr-input-container>

            <div class="clr-row">
                <div class="clr-control-label" style="padding-top: 4%;padding-left:1%">Node Selector</div>
                <div class="clr-col-3">
                    <input clrInput name="key" placeholder="e.g. kubernetes.io/hostname" [(ngModel)]="selectorKey"
                           size="20">
                </div>
                <div class="clr-col-3">
                    <select name="operation" [(ngModel)]="selectorOperation" clrSelect>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option value="In">In</option>
                        <option value="NotIn">NotIn</option>
                        <option value="Exists">Exists</option>
                        <option value="DoesNotExist">DoesNotExist</option>
                    </select>
                </div>
                <div class="clr-col-3" *ngIf="selectorOperation === 'In' || selectorOperation === 'NotIn'">
                    <input clrInput size="20" name="value" [(ngModel)]="selectorValue" placeholder="node1,node2">
                </div>
            </div>


        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'APP_CANCEL'|translate}}</button>
        <button type="button" class="btn btn-primary" (click)="onSubmit()"
                [disabled]="isSubmitGoing||pvForm.invalid">{{'APP_COMMIT'|translate}}</button>
    </div>
</clr-modal>
